<!--
 * @Author: your name
 * @Date: 2021-07-09 10:24:22
 * @LastEditTime: 2021-09-07 14:46:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat-c/personalCenter/myVip/index/couponCon.vue
-->
<template>
  <view class="coupon-list">
    <block>
      <!-- 平台 -->
      <view class="platform" v-if="item.grantType == '1'" @click="goDetail(item)">
        <!-- 现金、满减、折扣券1.现金券 2.满减券 3.折扣券(暂无) 4.兑换券 -->
        <!-- 现金、满减、折扣全场通用，课程通用，活动通用 -->
        <view class="normal" v-if="item.type !='4' && (item.useType == '0' || (item.useType == '2' && item.limitActId == '0') || (item.useType == '1' && item.limitClassId == '0'))">
          <view class="coupon-info">
            <view class="info-left">
              <view class="coupon-price">
                <text class="small">￥</text>
                <text>{{item.amount}}</text>
              </view>
              <view class="coupon-type" v-if="item.type=='1'">{{item.typeValue}}</view>
              <view class="coupon-type" v-if="item.type=='2'">满{{item.limitAmount}}可用</view>
              <view class="coupon-type" v-if="item.type=='3'">{{item.typeValue}}</view>
            </view>
            <view class="info-right">
              <view class="coupon-name line-clamp-1">{{item.name}}</view>
              <view class="date">{{item.startTime | timeLimit}}-{{item.endTime | timeLimit}}</view>
              <view class="rule">{{item.useType == '0' ? '全场通用' : item.useType == '1' ? '课程通用' : '活动通用'}}</view>
            </view>
            <view class="coupon-active">
              <view class="coupon-btn" v-if="item.status =='00'" @click.stop.self="useCoupon(item)">立即使用</view>
            </view>
          </view>
          <view class="use-icon" v-if="item.status !='00'">
            <image v-if="item.status == '10'" :src="'@/static/images/mine/coupon_frozen.png'|addBaseImgUrl" mode="" />
            <image v-if="item.status == '20'" :src="'@/static/images/mine/coupon_use.png'|addBaseImgUrl" mode="" />
            <image v-if="item.status == '30'" :src="'@/static/images/mine/coupon_overdue.png'|addBaseImgUrl" mode="" />
          </view>
        </view>
        <!-- 平台兑换券（指定长期课）、或者指定课程、指定活动样式 -->
        <view class="change" v-if="item.type == '4' || ((item.useType == '2' && item.limitActId != '0') || (item.useType == '1' && item.limitClassId != '0'))">
          <view class="coupon-info" v-if="item.type == '4'">
            <view class="info-left">
              <view class="coupon-price">
                <text>{{item.classCount}}</text>
                <text class="small">课时</text>
              </view>
              <view class="coupon-type">兑后{{item.classDays}}天有效</view>
            </view>
            <view class="info-right">
              <view class="coupon-name line-clamp-1">{{item.name}}</view>
              <view class="date">{{item.startTime | timeLimit}}-{{item.endTime | timeLimit}}</view>
              <view class="rule">以下课程专用</view>
            </view>
            <view class="coupon-active" v-if="item.status =='00'">
              <view class="coupon-btn" @click.stop.self="useCoupon(item)">立即兑换</view>
            </view>
          </view>
          <!-- 指定课程 -->
          <view class="coupon-info" v-if="item.type != '4' && (item.useType == '1' && item.limitClassId != '0')">
            <view class="info-left">
              <view class="coupon-price">
                <text class="small">￥</text>
                <text>{{item.amount}}</text>
              </view>
              <view class="coupon-type" v-if="item.type=='1'">{{item.typeValue}}</view>
              <view class="coupon-type" v-if="item.type=='2'">满{{item.limitAmount}}可用</view>
              <view class="coupon-type" v-if="item.type=='3'">{{item.typeValue}}</view>
            </view>
            <view class="info-right">
              <view class="coupon-name line-clamp-1">{{item.name}}</view>
              <view class="date">{{item.startTime | timeLimit}}-{{item.endTime | timeLimit}}</view>
              <view class="rule">以下课程专用</view>
            </view>
            <view class="coupon-active" v-if="item.status =='00'">
              <view class="coupon-btn" @click.stop.self="useCoupon(item)">立即使用</view>
            </view>
          </view>
          <!-- 指定活动 -->
          <view class="coupon-info" v-if="item.type != '4' && (item.useType == '2' && item.limitActId != '0')">
            <view class="info-left">
              <view class="coupon-price">
                <text class="small">￥</text>
                <text>{{item.amount}}</text>
              </view>
              <view class="coupon-type" v-if="item.type=='1'">{{item.typeValue}}</view>
              <view class="coupon-type" v-if="item.type=='2'">满{{item.limitAmount}}可用</view>
              <view class="coupon-type" v-if="item.type=='3'">{{item.typeValue}}</view>
            </view>
            <view class="info-right">
              <view class="coupon-name line-clamp-1">{{item.name}}</view>
              <view class="date">{{item.startTime | timeLimit}}-{{item.endTime | timeLimit}}</view>
              <view class="rule">以下活动专用</view>
            </view>
            <view class="coupon-active" v-if="item.status =='00'">
              <view class="coupon-btn" @click.stop.self="useCoupon(item)">立即使用</view>
            </view>
          </view>
          <!-- 课程信息 -->
          <view class="class-info" @click="toGoodsDetail">
            <view class="info-left">
              <view class="head-icon">
                <image :src="item.clubIcon || ('@/static/images/image-default.png'|addBaseImgUrl)" mode=""></image>
              </view>
            </view>
            <view class="info-right">
              <view class="class-name-row">
              	<!-- 指定课程 -->
              	<view class="class-name line-clamp-1" v-if="item.limitClassTitle">{{item.limitClassTitle}}</view>
              	<!-- 指定活动 -->
              	<view class="class-name line-clamp-1" v-if="item.limitActTitle">{{item.limitActTitle}}</view>
              	<image v-if="isDetail" class="icon-arrow" src="@/static/images/icon-arrow-yellow.png" mode=""></image>
              </view>
              <view class="club-name line-clamp-1">{{item.clubName}}</view>
            </view>
          </view>
          <view class="use-icon" v-if="item.status !='00'">
            <image v-if="item.status == '10'" :src="'@/static/images/mine/coupon_frozen.png'|addBaseImgUrl" mode="" />
            <image v-if="item.status == '20'" :src="'@/static/images/mine/coupon_use.png'|addBaseImgUrl" mode="" />
            <image v-if="item.status == '30'" :src="'@/static/images/mine/coupon_overdue.png'|addBaseImgUrl" mode="" />
          </view>
        </view>
      </view>
      <!-- 俱乐部 -->
      <view class="club" v-if="item.grantType == '2'" @click="goDetail(item)">
        <!-- 俱乐部所有券（指定长期课） -->
        <view class="change">
          <view class="coupon-info">
            <view class="info-left" v-if="item.type =='4'">
              <view class="coupon-price">
                <text>{{item.classCount}}</text>
                <text class="small">课时</text>
              </view>
              <view class="coupon-type">兑后{{item.classDays}}天有效</view>
            </view>
            <view class="info-left" v-else>
              <view class="coupon-price">
                <text class="small">￥</text>
                <text>{{item.amount}}</text>
              </view>
              <view class="coupon-type" v-if="item.type=='1'">{{item.typeValue}}</view>
              <view class="coupon-type" v-if="item.type=='2'">满{{item.limitAmount}}可用</view>
              <view class="coupon-type" v-if="item.type=='3'">{{item.typeValue}}</view>
            </view>
            <view class="info-right">
              <view class="coupon-name line-clamp-1">{{item.name}}</view>
              <view class="date">{{item.startTime | timeLimit}}-{{item.endTime | timeLimit}}</view>
              <template v-if="item.useType == '0'">
                <view class="rule">俱乐部内课程及活动通用</view>
              </template>
              <template v-if="item.useType == '1'">
                <view class="rule" v-if="item.limitClassId!='0'">以下课程专用</view>
                <view class="rule" v-if="item.limitClassId=='0'">俱乐部内课程通用</view>
              </template>
              <template v-if="item.useType == '2'">
                <view class="rule" v-if="item.limitActId!='0'">以下活动专用</view>
                <view class="rule" v-if="item.limitActId=='0'">俱乐部内活动通用</view>
              </template>
            </view>
            <view class="coupon-active" v-if="item.status =='00'">
              <view class="coupon-btn" @click.stop.self="useCoupon(item)">{{item.type == '4' ? '立即兑换' : '立即使用'}}</view>
            </view>
          </view>
          <!-- 课程信息 -->
          <view class="class-info" @click="toGoodsDetail">
            <view class="info-left">
              <view class="head-icon">
                <image :src="item.clubIcon||('@/static/images/image-default.png'|addBaseImgUrl)" mode=""></image>
              </view>
            </view>
            <!-- 指定课程或者活动 -->
            <view class="info-right" v-if="(item.useType == '1' && item.limitClassId!='0') || (item.useType == '2' && item.limitActId!='0')">
              <view class="class-name-row">
								<!-- 指定课程 -->
								<view class="class-name line-clamp-1" v-if="item.limitClassTitle">{{item.limitClassTitle}}</view>
								<!-- 指定活动 -->
								<view class="class-name line-clamp-1" v-if="item.limitActTitle">{{item.limitActTitle}}</view>
								<image v-if="isDetail" class="icon-arrow" src="@/static/images/icon-arrow-yellow.png" mode=""></image>
							</view>
              <view class="club-name line-clamp-1">{{item.clubName}}</view>
            </view>
            <!-- 全课程全活动或者全俱乐部通用 -->
            <view class="info-right" v-if="item.useType == '0' || (item.useType == '1' && item.limitClassId=='0') || (item.useType == '2' && item.limitActId =='0')">
              <view class="class-name line-clamp-2">{{item.clubName}}</view>
            </view>
          </view>
          <view class="use-icon" v-if="item.status !='00'">
            <image v-if="item.status == '10'" :src="'@/static/images/mine/coupon_frozen.png'|addBaseImgUrl" mode="" />
            <image v-if="item.status == '20'" :src="'@/static/images/mine/coupon_use.png'|addBaseImgUrl" mode="" />
            <image v-if="item.status == '30'" :src="'@/static/images/mine/coupon_overdue.png'|addBaseImgUrl" mode="" />
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: {}
    },
		isDetail: {
			type: Boolean,
			default: false
		}
  },
  filters: {
    timeLimit (time) {
      let time1 = time.split(' ')[0]
      return time1.replace(/-/g, '.')
    }
  },
  methods: {
		toGoodsDetail(){
			if(this.isDetail){
				let item = this.item
				if(item.useType == '1' && item.limitClassId!='0'){
					uni.navigateTo({
						url: `/course/detail/detail?id=${item.limitClassId}`
					})
				}else if(item.useType == '2' && item.limitActId!='0'){
					uni.navigateTo({
						url: `/activity/detail/detail?id=${item.limitActId}`
					})
				}
			}
		},
    useCoupon(item) {
      let url = ''
      // 平台下
      if (item.grantType == '1') {
        // 平台下现金、满减、折扣
        if (item.type != '4') {
          // 课程、活动通用
          if (item.useType == '0') {
            // 通用跳转首页
            uni.reLaunch({
               url: '/pages/index/index'
            })
            return
          } else if (item.useType == '1') {
            // 仅课程
            if (item.limitClassId!='0') {
              // 指定课程
              url = `/course/detail/detail?id=${item.limitClassId}`
            }else {
              // 全部课程
              uni.reLaunch({
                 url: '/pages/course/index/index'
              })
              return
            }
          } else {
            // 仅活动
            if (item.limitActId!='0') {
              // 指定活动
              url = `/activity/detail/detail?id=${item.limitActId}`
            } else {
              // 全部活动
              uni.reLaunch({
                 url: '/pages/activity/index/index'
              })
            }
          }
        } else {
          // 平台下兑换券
          url = `/mainProcess/confirmOrder/confirmOrder?couponId=${item.id}&type=class&id=${item.limitClassId}`
        }
      } else {
        // 俱乐部下现金、满减、折扣
        if (item.type != '4') {
          // 课程、活动通用
          if (item.useType == '0') {
            // 通用跳转俱乐部详情
            url= `/mainProcess/club/detail/detail?id=${item.clubId}`
          } else if (item.useType == '1') {
            // 仅课程
            if (item.limitClassId!='0') {
              // 指定课程
              url = `/course/detail/detail?id=${item.limitClassId}`
            }else {
              // 全部课程
              url= `/mainProcess/club/detail/detail?id=${item.clubId}`

            }
          } else {
            // 仅活动
            if (item.limitActId!='0') {
              // 指定活动
              url = `/activity/detail/detail?id=${item.limitActId}`
            } else {
              // 全部活动
              url= `/mainProcess/club/detail/detail?id=${item.clubId}`
            }
          }
        } else {
          // 俱乐部兑换券
          url = `/mainProcess/confirmOrder/confirmOrder?couponId=${item.id}&type=class&id=${item.limitClassId}`
        }
      }
      uni.navigateTo({
         url: url
      })
    },
    // 跳转详情
    goDetail(item) {
			if(this.isDetail){
				return false
			}
      uni.navigateTo({
         url: `/personalCenter/myVip/couponDetail/couponDetail?couponId=${item.id}`
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.coupon-list {
  padding: 0 10rpx 0;
  background: #f2f2f2;
  // 平台
  .platform,.club {
    overflow: hidden;
    // 平台下的现金、满减、折扣券
    .normal,.change {
      position: relative;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      margin-top: 20rpx;
      width: 100%;
      height: 196rpx;
      box-sizing: border-box;
      background: url($public-baseImgUrl+'mine/coupon_normal_bg.png') center no-repeat;
      background-size: 100% 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
      .coupon-info {
        width: 100%;
        display: flex;
        align-items: center;
        .info-left {
          min-width: 145rpx;
          margin-right: 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .coupon-price {
            text {
              line-height: 48rpx;
              font-size: 48rpx;
              color: #996600;
            }
            .small {
              font-size: 24rpx;
              line-height: 24rpx;
            }
          }
          .coupon-type {
            margin-top: 10rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            color: #996600;
          }
        }
        .info-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          .coupon-name {
            color: #333;
            font-size: 34rpx;
            line-height: 34rpx;
            height: 34rpx;
          }
          .date,.rule {
            margin-top: 20rpx;
            line-height: 24rpx;
            font-size: 24rpx;
            color: #C39539;
          }
        }
      }
      .coupon-active {
        .coupon-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 155rpx;
          height: 68rpx;
          border-radius: 34rpx;
          background: #EAA827;
          font-size: 26rpx;
          color: #fff;
        }
      }
    }
    .change {
      width: 100%;
      height: 360rpx;
      flex-direction: column;
      justify-content: center;
      background: url($public-baseImgUrl+'mine/coupon_change_bg.png') center no-repeat;
      background-size: 100% 100%;
      .coupon-info {
        margin-top: 14rpx;
      }
      .class-info {
        margin-top: 50rpx;
        width: 100%;
        display: flex;
        align-items: center;
        .info-left {
          min-width: 145rpx;
          margin-right: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .info-right {
          flex:1;
        }
        .head-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 124rpx;
          height: 124rpx;
          background: #f6da9f;
          overflow: hidden;
          border-radius: 24rpx;
          image {
            display: block;
            width: 110rpx;
            height: 110rpx;;
            border-radius: 15rpx;
          }
        }
				.class-name-row{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.icon-arrow{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						flex: 0 0 auto;
					}
				}
        .class-name{
          font-size: 30rpx;
          line-height: 30rpx;
          height: 30rpx;
          color: #333;
        }
        .club-name {
          margin-top: 20rpx;
          font-size: 24rpx;
          line-height: 24rpx;
          height: 24rpx;
          color:#C39539;
        }
      }
      .coupon-active {
        position: relative;
        top: 84rpx;
      }
    }
  }
  .club {
    .change {
      background-image: none;
      background: #fff;
      border-radius: 25rpx;
    }
    .coupon-info {
      padding-bottom: 25rpx;
      box-sizing: border-box;
    }
    .class-info {
      width: 464rpx!important;
      margin-top: 0!important;
      padding-top: 25rpx;
      border-top: 1px solid #f0f0ef;
      box-sizing: border-box;
			.class-name-row{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.icon-arrow{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
					flex: 0 0 auto;
				}
			}
    }
    .coupon-price{
        color: #FF0000!important;
      text {
        color: #FF0000!important;
      }
    }
    .coupon-type {
        color: #999!important;
    }
    .info-right {
      .date,.rule,.club-name {
        color: #999!important;
      }
    }
  }
}
.use-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  image {
    width: 131rpx;
    height: 113rpx;
  }
}
</style>
